<template>
  <u-popup
    :show="show"
    mode="center"
    @close="close"
    @open="open"
    :safeAreaInsetBottom="false"
  >
    <view class="make">
      <swiper
        :current="current"
        @change="handleChange"
        :style="{ height: allHeight[current].height + 20 + 'px' }"
      >
        <block v-if="type === 'isCanyinProduce'">
          <swiper-item>
            <makeDineIn class="makeDineInClass" />
          </swiper-item>
          <swiper-item>
            <makePack class="makePackClass" />
          </swiper-item>
          <swiper-item>
            <makeIntraCityDelivery class="makeIntraCityDeliveryClass" />
          </swiper-item>
        </block>
        <block v-else>
          <block v-if="industry < 100">
            <swiper-item>
              <checkoutDineIn class="checkoutDineInClass" />
            </swiper-item>
            <swiper-item>
              <checkoutPack class="checkoutPackClass" />
            </swiper-item>
            <swiper-item>
              <checkoutIntraCityDelivery
                class="checkoutIntraCityDeliveryClass"
              />
            </swiper-item>
          </block>

          <block v-else>
            <swiper-item>
              <checkoutShopConsume class="checkoutShopConsumeClass" />
            </swiper-item>
            <swiper-item>
              <checkoutSelfPickUp class="checkoutSelfPickUpClass" />
            </swiper-item>
            <swiper-item>
              <checkoutIntraCityDelivery
                class="checkoutIntraCityDeliveryClass"
              />
            </swiper-item>
          </block>
        </block>
      </swiper>
    </view>
  </u-popup>
</template>

<script>
import makeDineIn from "./components/make/hall-food";
import makeIntraCityDelivery from "./components/make/local";
import makePack from "./components/make/pack";

import checkoutDineIn from "./components/checkout/hall-food";
import checkoutIntraCityDelivery from "./components/checkout/local";
import checkoutPack from "./components/checkout/pack";
import checkoutSelfPickUp from "./components/checkout/self-pick-up";
import checkoutShopConsume from "./components/checkout/shop-consume";

import { mapState } from "vuex";
export default {
  components: {
    makeDineIn,
    makeIntraCityDelivery,
    makePack,
    checkoutDineIn,
    checkoutIntraCityDelivery,
    checkoutPack,
    checkoutSelfPickUp,
    checkoutShopConsume,
  },
  data() {
    return {
      show: false,
      type: 0,

      current: 0,
      allHeight: [],
      headStyle: {
        fontSize: "34rpx",
        color: "#8a8b8e",
        fontWeight: "bold",
        borderBottom: "1rpx dashed #efefef",
        padding: "20rpx 0",
        boxSizing: "border-box",
      },
      headStyle1: {
        fontSize: "34rpx",
        color: "#8a8b8e",
        fontWeight: "bold",
        padding: "20rpx 0",
        boxSizing: "border-box",
      },
    };
  },
  computed: {
    ...mapState("sp-common/auth", ["pubUserInfo"]),
    industry({ pubUserInfo }) {
      return Number(pubUserInfo?.pubDomainShopVo?.industry);
    },
  },
  mounted() {},
  methods: {
    open(e) {
      this.show = true;
      this.type = e;
      this.$nextTick(() => {
        this.getAllComHeight();
      });
      console.log("open", e);
    },
    close() {
      this.show = false;
      this.touchIndex = 0;
      // console.log('close');
    },
    handleChange(_current) {
      console.log("current", _current);
      this.current = _current.detail.current;
    },
    // 获取组件高度
    uGetRect(selector, all) {
      return new Promise((resolve) => {
        uni
          .createSelectorQuery()
          .in(this)
          [all ? "selectAll" : "select"](selector)
          .boundingClientRect((rect) => {
            if (all && Array.isArray(rect) && rect.length) {
              resolve(rect);
            }
            if (!all && rect) {
              resolve(rect);
            }
          })
          .exec();
      });
    },
    getAllComHeight() {
      //----制作单-----
      //餐饮行业
      if (this.industry < 100) {
        const makeDineIn = this.uGetRect(".makeDineInClass"); //堂食
        const makePack = this.uGetRect(".makePackClass"); //打包
        const makeIntraCityDelivery = this.uGetRect(
          ".makeIntraCityDeliveryClass"
        ); //同城配送
        Promise.all([makeDineIn, makeIntraCityDelivery, makePack]).then(
          (res) => {
            this.allHeight = res;
          }
        );
      }

      //----结账单-----
      //餐饮行业
      if (this.industry < 100) {
        const checkoutDineInClass = this.uGetRect(".checkoutDineInClass"); //堂食
        const checkoutPackClass = this.uGetRect(".checkoutPackClass"); //打包
        const checkoutIntraCityDeliveryClass = this.uGetRect(
          ".checkoutIntraCityDeliveryClass"
        ); //同城配送
        Promise.all([
          checkoutDineInClass,
          checkoutPackClass,
          checkoutIntraCityDeliveryClass,
        ]).then((res) => {
          this.allHeight = res;
        });
      } else {
        const checkoutShopConsumeClass = this.uGetRect(
          ".checkoutShopConsumeClass"
        ); //到店消费
        const checkoutSelfPickUpClass = this.uGetRect(
          ".checkoutSelfPickUpClass"
        ); //自提
        const checkoutIntraCityDeliveryClass = this.uGetRect(
          ".checkoutIntraCityDeliveryClass"
        ); //同城配送
        Promise.all([
          checkoutSelfPickUpClass,
          checkoutShopConsumeClass,
          checkoutIntraCityDeliveryClass,
        ]).then((res) => {
          this.allHeight = res;
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.make {
  width: 570rpx;
  // overflow: hidden;
  padding: 20rpx;
  box-sizing: border-box;
}
</style>
